import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../stroe'
import { getChannel } from '../stroe/action/channels'
import {updateID} from '../stroe/action/channels'
export default function Channel() {
  const dispatch= useDispatch()
  const channelsList=useSelector((state:RootState)=>state.channels.channelList)
  console.log( channelsList);
  const channelID=useSelector((state:RootState)=>state.channels.activeID)
  console.log(channelID);
  useEffect(()=>{
     // 获取频道列表数据
     function getChannels() {
         dispatch(getChannel())
     }
     getChannels()
  },[dispatch])
 function changeState (id:number){
      dispatch(updateID(id))  
  }
  return (
    <ul className="catagtory">
      {channelsList.map(it=>(<li 
      key={it.id} 
      className={channelID===it.id?'select':''}
      onClick={
        ()=>{
          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
          changeState(it.id)
        }
      }>{it.name}</li>))}
    </ul>
  )
}